<!--
  红包详情页
-->



<template>
  <div class="box_cont">
    <div>
      <div class="cont_bg">
        <div class="rule">
          <p @click="openRule">红包规则</p>
        </div>
        <div class="avatar">
          <img src="/static/img/qdhb.png">
        </div>
        <div class="sender">
            <p>{{fhbuser}}发来的红包</p>
        </div>
        <div class="desc">
          <p>{{redPacketTitle}}</p>
        </div>
        <div class="detail">
            <div class="receive" v-if="showqd">
              恭喜你抢到<span class="quantity"> {{myatoshiValue}} </span>个{{bizhong}}
            </div>
            <div class="receive" v-if="showqgl">
              {{mqdmsg}}
            </div>
            <div class="receive_step">
              <p>如何查看红包记录：打开原子链-使用领取红包的手机号登录-进入原子链红包即可，没有原子链？<a @click="toxiazaiye">去下载&gt;&gt;</a></p>

            </div>
        </div>
        <div class="distribution">
          <p>已领取 {{hbnum}} / {{hballnum}}，共{{gotmoney}} / {{atoshiallValue}}{{bizhong}}</p>
        </div>
        <div class="receive_list">
          <div class="item_box" v-for="(item,index) in qhhblist" :key="index">
            <div class="imgbox">
              <img :src="item.lquserhead" class="receive_avatar">
            </div>
            <div class="descbox">
                <p class="username">{{item.lqusername}}</p>
                <p class="time">{{item.redPacket.addTime}}</p>
            </div>
            <div class="number">
                <p><span>{{item.redPacket.atoshiValue}}</span> {{bizhong}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="zhezhao" v-if="zhezhaoshow">
      <div class="hongbao_rulebox">
        <div class="title">
          <p>领取红包规则</p>
        </div>
        <ol>
          <li class="first">
            <div class="first">
              <p>领红包流程</p>
              <ul>
                <li>
                  <p></p>
                  <span>下载“原子链”APP <a @click="toxiazaiye">去下载&gt;&gt;</a></span>
                </li>
                <li><p></p><span>用领取红包的手机号码登录即可</span></li>
                <li><p></p><span>去原子链红包查看收发红包记录</span></li>
              </ul>
              
            </div>
          </li>
          <li class="sec"><p>同一个红包，每人只能领取一次</p></li>
          <li class="thr"><p>领取红包后3天内，未通过以上方式进入原子链APP，则已 领到的红包将自动退给发红包用户</p></li>
        </ol>
        <div class="line">

        </div>
        <div class="close">
          <p @click="closeRule">我知道了</p>
        </div>
        
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from "vue";
  import MintUI from "mint-ui";
  import { Toast , MessageBox } from "mint-ui";
  Vue.use( MintUI , Toast , MessageBox );

  // cxr 引入路由
  import Router from "vue-router";
  Vue.use(Router);

  export default {
    name: "hongbaoDetail",
    data() {
      return {
        zhezhaoshow:false,
        // 发红包的人
        fhbuser:"",
        showqd:true,
        showqgl:false,
        // 抢到atos个数
        myatoshiValue:"",
        // atos总数
        atoshiallValue:"",
        gotmoney:0,
        // 抢到红包数量
        hbnum:null,
        // 红包总个数
        hballnum:null,
        // 红包标语
        redPacketTitle:"",
        qhhblist:[],
        mqdmsg:"",
        bizhong:'ATOS'
      };
    },
    methods: {
      tos (test) {
        Toast({message: test, position: 'top', duration: 2000});
      },
      //cxr 跳转到下载页面 
      toxiazaiye(){
        this.$router.push({path:'/xiazaiye'})
      },
      //打开红包规则
      openRule(){
        this.zhezhaoshow = true;
      },
      //关闭红包规则
      closeRule(){
        this.zhezhaoshow = false;
      },
      gethbqk(){
        // 根据红包总数量 获取红包详情页信息
        this.axios.post("/api/redPacket/listRedPacketById",{totalRedPacketId:window.localStorage.getItem("totalhbid")}).then(res =>{
          console.log(res);
          this.myatoshiValue = localStorage.getItem("myatoshiValue");
          if(this.showqd === true){
            this.myatoshiValue = localStorage.getItem("myatoshiValue");
            this.showqgl=false;
          }else{
            this.showqgl=true;
            this.showqd =false
          }
          if(res.data.code===100){
            let data=res.data.data.totalRedPacket
              console.log(data,123)
              this.hballnum=data.totalRedPacket.number;
              this.atoshiallValue=data.totalRedPacket.amount;
              this.redPacketTitle=data.totalRedPacket.redPacketTitle;
              this.gotmoney=data.gotMoney;
              this.hbnum=data.gotSize;

              for (let index = 0; index < data.dataList.length ; index++){
                this.qhhblist.push({
                  lquserhead:data.dataList[index].gotUserHead?data.dataList[index].gotUserHead :"/static/img/sft.png",
                  lqusername:data.dataList[index].gotUserName,
                  redPacket:{
                    atoshiValue:data.dataList[index].redPacket.amount,
                    addTime:data.dataList[index].redPacket.addTime
                  }
                })
              }
              console.log(this.qhhblist)
              
          }else{
            this.tos(res.data.msg)
          }
        })
      },
    },
    mounted () {
      // console.log(123465)
      console.log(localStorage.getItem("fhbuser"),localStorage.getItem("totalhbid"))
      console.log(this.mqdmsg,this.showqgl,this.showqd)
      this.fhbuser = localStorage.getItem("fhbuser");
      this.bizhong = this.$root.bizhong;
      this.gethbqk();
      // console.log(localStorage.getItem("fhbuser"),this.$route.query.totalRedPacketId)
    },
    beforeMount() {
      
      this.mqdmsg = localStorage.getItem("mqdmsg");
      this.showqd = localStorage.getItem("showqd");
      this.showqgl = localStorage.getItem("showqgl");
    }
  }
</script>

<style lang="scss" scoped>
  @import "src/common/css/mixin";
  $background: #FFE8A8;
  .box_cont{
    width:100%;
    // min-height: 100vh;
    background: #f5f5f5;
    position:relative;
    .cont_bg{
      width:Rem(375);
      // min-height: 100vh;
      margin:Rem(0) auto;
      background:url("/static/img/hongbaodetail_header.png") no-repeat;
      background-size: 100% Rem(155);
      position: relative;
      z-index:5;
      text-align:center;
      // display: flex;
      // flex-direction: column;
      .rule{
        position:relative;
        width:Rem(50);
        height:Rem(12);
        top:Rem(36);
        left:Rem(313);
        p{
          font-family:"PingFang-SC-Medium";
          color:#FFD6A6;
          font-size:Rem(12);
          font-weight:500;
        }
      }
      .avatar{
        position:relative;
        background:#f5f5f5;
        margin:0 auto;
        top:Rem(89);
        width:Rem(99);
        height:Rem(99);
        border-radius:Rem(50);
        box-shadow:Rem(0) Rem(1) Rem(3) rgba(0,0,0,0.25);
        overflow: hidden;
        img{
          width: 100%
        }
      }
      .sender{
        position:relative;
        top:Rem(119);
        p{
          font-family:"MicrosoftYaHei";
          color:#666666;
          font-size:Rem(13);
          line-height:Rem(21);
          font-weight:400;
        }
      }
      .desc{
        position:relative;
        top:Rem(139);
        p{
          font-family:"MicrosoftYaHei";
          color:#333333;
          font-size:Rem(14);
        }
      }
      .detail{
        box-sizing: border-box;
        position:relative;
        top:Rem(169);
        width:Rem(375);
        // height:Rem(188);
        background:#fff;
        padding: Rem(30) 0;
        .receive{
          position:relative;
          font-family:"PingFang-SC-Medium";
          color:#333333;
          font-size:Rem(15);
          font-weight:500;
          .quantity{
            font-family:"PingFang-SC-Bold";
            color:#F80112;
            font-size:Rem(36);
            font-weight:Bold;
          }
        }
        .receive_step{
          width:Rem(345);
          height:Rem(70);
          background:#F7FCFE;
          margin:0 auto;
          margin-top: Rem(30);
          position:relative;
          border-radius:Rem(4);
          box-sizing:border-box;
          border:Rem(1) solid #B2DFEE;
          padding:0 Rem(11) 0 Rem(16);
          line-height: Rem(28);
            p{
              margin-top: Rem(7);
              font-size:Rem(13);
              color:#666666;
              text-align:left;
              
              a{
                color:#00A0EA;
                font-size:Rem(13)
              }
            }
          
        }
      }
      .distribution{
        position:relative;
        top:Rem(169);
        height:Rem(50);
        line-height:Rem(50);
        width:Rem(375);
        background:#fff;
        margin-top:Rem(1);
        p{
          color:#666666;
          font-family:"PingFang-SC-Medium";
          font-weight:400;
          font-size:Rem(13);
          text-align:left;
          margin-left:Rem(15)
        }
      }
      .receive_list{
        position:relative;
        background:#fff;
        top:Rem(169);
        margin-top:Rem(1);
        // flex:1;
        // overflow: auto;
        .item_box{
          border-bottom: Rem(.5) solid #cccccc;
          padding:Rem(12) Rem(15);
          overflow:hidden;
          .imgbox{
            float:left;
            width:Rem(40);
            height:Rem(40);
            // background:#333;
            border-radius: Rem(6);
            img{
              width: 100%;
            }
          }
          .descbox{
            height:Rem(40);
            float:left;
            margin-left:Rem(13);
            text-align:left;
              p{
               font-size:Rem(12);
               text-align:left;
              }
              .username{
                color: #666666;
                margin-top: Rem(3)
              }
              .time{
                margin-top: Rem(2);
                color: #999999
              }
          }
          .number{
            height:Rem(40);
            float:right;
            font-size:Rem(12);
            p{
              color: #666666;
            }
            span{
              height:Rem(40);
              line-height:Rem(40);
              color:#00A0EA;
            }
          }
        }
      }
    }
    .zhezhao{
      width:Rem(375);
      min-height: 100vh;
      margin:Rem(0) auto;
      background:rgba(0,0,0,.5);
      position: fixed;
      top:0;
      left:0;
      z-index:15;
      font-family: "PingFang-SC-Medium";
      .hongbao_rulebox{
        width:Rem(345);
        height:Rem(269);
        margin:0 auto;
        box-sizing: border-box;

        background: #fff;
        position: relative;
        top:Rem(191);
        z-index:20;
        text-align: center;
        .title{
          padding: Rem(18) 0;
          p{
            color:#333333;
            font-size: Rem(14)
          }
        }
        ol{
          padding-left: Rem(26);
          padding-right: Rem(17);
          li{
            font-size: Rem(12);
            text-align: left;
            line-height: Rem(18);
            list-style: decimal;
          }
          .first{
            p{
              color: #333333;
              font-size: Rem(12);
              text-align: left;
            }
            ul{
              text-align: left;
            
              li{
                color: #00A0EA;
                font-size:Rem(12); 
                margin-bottom: Rem(4);
                list-style: none;
                p{
                  display: inline-block;
                  vertical-align: middle;
                  border-radius: Rem(3);
                  margin-right: Rem(6);
                  width: Rem(6);
                  height: Rem(6);
                  background: #00A0EA;
                }
                span{
                  vertical-align: middle;
                }
                a{
                  color: #00A0EA;
                  font-size:Rem(12);
                }
                // list-style: disc;
                
              }
            }
          }
          .sec{
            
            p{
              height: Rem(12);
              line-height: Rem(12);
              color: #333333;
              font-size: Rem(12);
              text-align: left;
            }
          }
          .thr{
            margin-top: Rem(12);
            p{
              color: #333333;
              font-size: Rem(12);
              line-height: Rem(18);
              text-align: left;
            }
          }
        }
        .line{
          background: #CCCCCC;
          height: Rem(1);
          width: Rem(345);
          margin-top: Rem(18)
        }
        .close{
          p{
            color: #333333;
            font-size: Rem(13);
            padding: Rem(12) 0;
          }
        }
        
      }
  }


  }
</style>
